<template>
	<view v-if="!isFirstload" class="container" :style="appThemeStyle">
		<view class="head-box">
			<view class="info-box" v-if="isLogin">
				<view class="left">
					<view class="avatar" @click="$navTo('pages/user/personal/index')">
						<avatar-image
							:url="userInfo.avatar_url||'https://b2c.oozetking.cn/uploads/10001/20240727/be8dec10ebb31b0817f002ed4eab238d.png'"
							:width="100" />
					</view>
				</view>
				<view class="right">
					<view class="fw" @click="$navTo('pages/user/personal/index')">{{ userInfo.nick_name }}</view>
					<view class="uline">淘宝/京东/拼多多/抖音<text @click="$navTo('pages/article/detail',{articleId:2})">返利教程 >
						</text></view>
				</view>
			</view>
			<view class="info-box" v-else>
				<view class="left">
					<avatar-image
						url="https://b2c.oozetking.cn/uploads/10001/20240727/be8dec10ebb31b0817f002ed4eab238d.png"
						:width="100" />
				</view>
				<view class="right">
					<view class="fw" @click="handleLogin">点击登录</view>
					<view class="uline">淘宝/京东/拼多多/抖音<text>返利教程 > </text></view>
				</view>
			</view>
		</view>
		<view class="bottom-box">
			<view class="payoyts" v-if="isLogin">
				<view class="left">
					可提现 : <text>{{ dealer?.money }}元</text>
				</view>
				<view class="right" @click="$navTo('pages/dealer/withdraw/apply')">
					立即提现
				</view>
			</view>

			<view class="box">
				<view class="item" v-for="(item,index) in cellList" :key="index" @click="cellClick(item)">
					<view class="left">
						<image :src="item.icon" mode=""></image>
						<view>{{item.name}}</view>
					</view>
					<view class="right">
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
			</view>
			<view class="box">
				<view class="item" v-for="(item,index) in cellList1" :key="index" @click="cellClick(item)">
					<view class="left">
						<image :src="item.icon" mode=""></image>
						<view>{{item.name}}</view>
					</view>
					<view class="right">
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
			</view>
		</view>



	</view>
</template>

<script>
	import store from '@/store'
	import {
		inArray
	} from '@/utils/util'
	import AvatarImage from '@/components/avatar-image'
	import Recommended from '@/components/recommended'
	import CustomerBtn from '@/components/customer-btn'
	import PromotePopup from '@/components/promote-popup'
	import {
		setCartTabBadge
	} from '@/core/app'
	import SettingKeyEnum from '@/common/enum/setting/Key'
	import StoreModel from '@/common/model/Store'
	import SettingModel from '@/common/model/Setting'
	import * as UserApi from '@/api/user'
	import * as OrderApi from '@/api/order'
	import {
		checkLogin,
		filterModules
	} from '@/core/app'
	import imgs from '@/utils/imgs.js'
	import * as DealerApi from '@/api/dealer' 

	const cellList = [{
			icon: imgs.my.m1,
			name: '商城订单',
			path: 'pages/order/index'
		},
		{
			icon: imgs.my.m2,
			name: '我的奖励',
			path: 'pageA/my-reward/my-reward'
		},
		{
			icon: imgs.my.m17,
			name: '我的售后',
			path: 'pages/refund/index'
		},
		{
			icon: imgs.my.m3,
			name: '奖励精选',
			path: 'pageA/reward-good/reward-good'
		},
		{
			icon: imgs.my.m4,
			name: '我的优惠券',
			path: 'pages/my-coupon/index'
		},
		// {
		// 	icon: imgs.my.m5,
		// 	name: '我的发帖',
		// 	path: 'pageA/my-words/my-words'
		// },
		{
			icon: imgs.my.m6,
			name: '我的足迹',
			path: 'pageA/my-foot/my-foot'
		},
		{
			icon: imgs.my.m7,
			name: '我的收藏',
			path: 'pageA/my-love/my-love'
		},
		{
			icon: imgs.my.m8,
			name: '邀请好友',
			// path: 'pageA/invite/invite'
			path: 'pageA/invite/index'
		},
		{
			icon: imgs.my.m8,
			name: '我的团队',
			path: 'pageA/invite/team'
		},
	]


	const cellList1 = [{
			icon: imgs.my.m9,
			name: '联系客服',
			path: 'kefu'
		},
		{
			icon: imgs.my.m10,
			name: '设置',
			path: 'pageA/setting/setting'
		},

	]

	// 订单操作
	const orderNavbar = [{
			id: 'all',
			name: '全部订单',
			icon: 'qpdingdan'
		},
		{
			id: 'payment',
			name: '待支付',
			icon: 'daifukuan',
			count: 0
		},
		{
			id: 'delivery',
			name: '待发货',
			icon: 'daifahuo',
			count: 0
		},
		{
			id: 'received',
			name: '待收货',
			icon: 'daishouhuo',
			count: 0
		},
	]

	/**
	 * 我的服务
	 * id: 标识; name: 标题名称; icon: 图标; type 类型(link和button); url: 跳转的链接
	 */
	const service = [{
			id: 'address',
			name: '收货地址',
			icon: 'shouhuodizhi',
			type: 'link',
			url: 'pages/address/index'
		},
		{
			id: 'coupon',
			name: '领券中心',
			icon: 'lingquan',
			type: 'link',
			url: 'pages/coupon/index',
			moduleKey: 'market-coupon'
		},
		{
			id: 'myCoupon',
			name: '优惠券',
			icon: 'youhuiquan',
			type: 'link',
			url: 'pages/my-coupon/index',
			moduleKey: 'market-coupon'
		},
		{
			id: 'refund',
			name: '退换/售后',
			icon: 'shouhou',
			type: 'link',
			url: 'pages/refund/index',
			count: 0
		},
		{
			id: 'contact',
			name: '在线客服',
			icon: 'kefu',
			type: 'contact'
		},
		{
			id: 'points',
			name: '我的积分',
			icon: 'jifen',
			type: 'link',
			url: 'pages/points/log',
			moduleKey: 'market-points'
		},
		{
			id: 'dealer',
			name: '分销中心',
			icon: 'fenxiao',
			type: 'link',
			url: 'pages/dealer/index',
			moduleKey: 'apps-dealer'
		},
		{
			id: 'groupon',
			name: '我的拼团',
			icon: 'pintuan',
			type: 'link',
			url: 'pages/groupon/index?tab=1',
			moduleKey: 'apps-groupon'
		},
		{
			id: 'bargain',
			name: '我的砍价',
			icon: 'kanjia',
			type: 'link',
			url: 'pages/bargain/index?tab=1',
			moduleKey: 'apps-bargain'
		},
		{
			id: 'orderCenter',
			name: '订单中心',
			icon: 'order-c',
			type: 'link',
			url: 'pages/order/center'
		},
		{
			id: 'help',
			name: '我的帮助',
			icon: 'bangzhu',
			type: 'link',
			url: 'pages/help/index',
			moduleKey: 'content-help'
		},
	]

	export default {
		components: {
			AvatarImage,
			Recommended,
			CustomerBtn,
			PromotePopup
		},
		data() {
			return {
				inArray,
				// 枚举类
				SettingKeyEnum,
				// 正在加载
				isLoading: true,
				// 首次加载
				isFirstload: true,
				// 是否已登录
				isLogin: false,
				// 系统设置
				setting: {},
				// 当前用户信息
				userInfo: {},
				// 账户资产
				assets: {
					balance: '--',
					points: '--',
					coupon: '--'
				},
				// 我的服务
				service,
				// 订单操作
				orderNavbar,
				// 当前用户待处理的订单数量
				todoCounts: {
					payment: 0,
					deliver: 0,
					received: 0
				},
				cellList,
				cellList1,
				// 分销商用户信息
				dealer: undefined,
			}
		},

		/**
		 * 生命周期函数--监听页面显示
		 */
		onLoad(options) {
		},

		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow() {
			this.onRefreshPage()
			this.getDealer()
		},

		methods: {
			getDealer() {
				const app = this
				app.isLoading = true
				DealerApi.user()
					.then(result => app.dealer = result.data.dealer)
					.finally(() => app.isLoading = false)
			},
			openKefu() {

				uni.makePhoneCall({
					phoneNumber: uni.getStorageSync('Store').storeInfo.kefu
				})
			},
			cellClick(item) {
				if (!this.isLogin) {
					this.$toast('请先登录')
					return
				}
				// if(item.path=='contact'){
				// 	return
				// }

				if (item.path == 'kefu') {
					this.openKefu()
					return
				}

				if (!item.path) {
					this.$toast('功能暂未开放')
					return
				}

				this.$navTo(item.path)
			},

			// 刷新页面
			onRefreshPage() {
				// 更新购物车角标
				setCartTabBadge()
				// 判断是否已登录
				this.isLogin = checkLogin()
				// 获取页面数据
				this.getPageData()
			},

			// 获取页面数据
			getPageData(callback) {
				const app = this
				app.isLoading = true
				Promise.all([app.getSetting(), app.getUserInfo(), app.getUserAssets(), app.getTodoCounts()])
					.then(result => {
						app.isFirstload = false
						// 初始化我的服务数据
						app.initService()
						// 初始化订单操作数据
						app.initOrderTabbar()
						// 执行回调函数
						callback && callback()
					})
					.catch(err => console.log('catch', err))
					.finally(() => app.isLoading = false)
			},

			// 初始化我的服务数据
			async initService() {
				const app = this
				const isEnabledDealer = await StoreModel.isEnabledDealer()
				const isShowCustomerBtn = await SettingModel.isShowCustomerBtn()
				const newService = []
				service.forEach(item => {
					// 默认开启
					item.enabled = true
					// 我的积分
					if (item.id === 'points') {
						item.name = '我的' + app.setting[SettingKeyEnum.POINTS.value].points_name
					}
					// 是否显示分销中心
					if (item.id === 'dealer' && !isEnabledDealer) {
						item.enabled = false
					}
					// 企业微信客服
					if (item.id === 'contact' && !isShowCustomerBtn) {
						item.enabled = false
					}
					// 数据角标
					if (item.count != undefined) {
						item.count = app.todoCounts[item.id]
					}
					newService.push(item)
				})
				app.service = filterModules(newService)
			},

			// 初始化订单操作数据
			initOrderTabbar() {
				const app = this
				const newOrderNavbar = []
				orderNavbar.forEach(item => {
					if (item.count != undefined) {
						item.count = app.todoCounts[item.id]
					}
					newOrderNavbar.push(item)
				})
				app.orderNavbar = newOrderNavbar
			},

			// 获取商城设置
			getSetting() {
				const app = this
				return new Promise((resolve, reject) => {
					SettingModel.data()
						.then(setting => {
							app.setting = setting
							resolve(setting)
						})
						.catch(reject)
				})
			},

			// 获取当前用户信息
			getUserInfo() {
				const app = this
				return new Promise((resolve, reject) => {
					!app.isLogin ? resolve(null) : UserApi.info({}, {
							load: app.isFirstload
						})
						.then(result => {
							app.userInfo = result.data.userInfo
							resolve(app.userInfo)
						})
						.catch(err => {
							if (err.result && err.result.status == 401) {
								app.isLogin = false
								resolve(null)
							} else {
								reject(err)
							}
						})
				})
			},

			// 获取账户资产
			getUserAssets() {
				const app = this
				return new Promise((resolve, reject) => {
					!app.isLogin ? resolve(null) : UserApi.assets({}, {
							load: app.isFirstload
						})
						.then(result => {
							app.assets = result.data.assets
							resolve(app.assets)
						})
						.catch(err => {
							if (err.result && err.result.status == 401) {
								app.isLogin = false
								resolve(null)
							} else {
								reject(err)
							}
						})
				})
			},

			// 获取当前用户待处理的订单数量
			getTodoCounts() {
				const app = this
				return new Promise((resolve, reject) => {
					!app.isLogin ? resolve(null) : OrderApi.todoCounts({}, {
							load: app.isFirstload
						})
						.then(result => {
							app.todoCounts = result.data.counts
							resolve(app.todoCounts)
						})
						.catch(err => {
							if (err.result && err.result.status == 401) {
								app.isLogin = false
								resolve(null)
							} else {
								reject(err)
							}
						})
				})
			},

			// 跳转到登录页
			handleLogin() {
				//#ifdef APP-PLUS
				!this.isLogin && this.$navTo('pageA/app-login1/app-login1')
				return
				//#endif
				// !this.isLogin && this.$navTo('pageA/app-login1/app-login1')
				!this.isLogin && this.$navTo('pages/login/index')
			},

			// 跳转到绑定手机号页面
			handleBindMobile() {
				this.$navTo('pages/user/bind/index')
			},

			// 跳转到修改个人信息页
			handlePersonal() {
				this.$navTo('pages/user/personal/index')
			},

			// 退出登录
			handleLogout() {
				const app = this
				uni.showModal({
					title: '友情提示',
					content: '您确定要退出登录吗?',
					success(res) {
						if (res.confirm) {
							store.dispatch('Logout', {})
								.then(result => app.onRefreshPage())
						}
					}
				})
			},

			// 跳转到钱包页面
			onTargetWallet() {
				this.$navTo('pages/wallet/index')
			},

			// 跳转到订单页
			onTargetOrder(item) {
				this.$navTo('pages/order/index', {
					dataType: item.id
				})
			},

			// 跳转到我的积分页面
			onTargetPoints() {
				this.$navTo('pages/points/log')
			},

			// 跳转到我的优惠券页
			onTargetMyCoupon() {
				this.$navTo('pages/my-coupon/index')
			},

			// 跳转到服务页面
			handleService({
				url
			}) {
				this.$navTo(url)
			}

		},

		/**
		 * 下拉刷新
		 */
		onPullDownRefresh() {
			// 获取首页数据
			this.getPageData(() => {
				uni.stopPullDownRefresh()
			})
		},


	}
</script>

<style lang="scss">
	page {
		background-color: #F5F4F3;
		height: 100%;
	}

	.head-box {
		height: 400rpx;
		background-image: url('https://b2c.oozetking.cn/uploads/10001/20240727/a0ad8e5bee06501ec9ba9900ebe7dd91.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		padding: 180rpx 32rpx;

		.info-box {
			display: flex;
			align-items: center;

			.left {
				margin-right: 24rpx;

				.avatar {
					width: 112rpx;
					height: 112rpx;
					border-radius: 50%;
					overflow: hidden;

					>image {
						width: 100%;
						height: 100%;
					}
				}
			}

			.right {
				.fw {
					font-size: 36rpx;
					font-weight: bold;
					margin-bottom: 8rpx;
				}

				.uline {
					color: #666260;

					>text {
						color: #FF8C19;
					}
				}
			}
		}
	}

	.bottom-box {
		padding: 0 24rpx;

		.payoyts {
			width: 702rpx;
			height: 88rpx;
			background: #FFFFFF;
			border-radius: 12rpx;
			box-sizing: border-box;
			padding: 26rpx 32rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: -64rpx;
			margin-bottom: 20rpx;

			.left {
				color: #666260;

				>text {
					color: #FF8C19;
				}
			}

			.right {
				width: 136rpx;
				height: 48rpx;
				background: #FF8C19;
				border-radius: 24rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 24rpx;
				color: #fff;
			}
		}

		.box {
			background-color: #fff;
			border-radius: 12rpx;
			margin-bottom: 20rpx;

			.item {
				padding: 32rpx 24rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.left {
					display: flex;
					align-items: center;

					>image {
						width: 48rpx;
						height: 48rpx;
						margin-right: 10rpx;
					}

					>view {
						font-size: 28rpx;
						color: #333130;
					}
				}

				.right {}
			}
		}
	}
</style>